<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/react.development.js"></script>
	<script src="lib/react-dom.development.js"></script>
	<script src="lib/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
	const root = ReactDOM.createRoot(document.querySelector("#app"));
	{
		// 1- {} 内包裹的表达式称为插值表达式，嵌套表达式。语法有的人将其称为胡子语法。
		// const result = "我现在很好！";
		// root.render((
		// 	<div>
		// 		<h3>{result}</h3>
		// 	</div>
		// ));
	}
	{
		// 2-> 布尔，undefined,null不会进行渲染。
		// root.render((
		// 	<div>
		// 		<h3>{true}</h3>
		// 		<h3>{false}</h3>
		// 		<h3>{null}</h3>
		// 		<h3>{undefined}</h3>
		// 	</div>
		// ));
	}
	{
		// 不要直接写函数（函数会作为组件去处理），不支持对象的。
		// function fn(){
		// 	return {a:1};
		// }
		// // 方法
		// root.render((
		// 	<div>
		// 		<h3>{fn}</h3>
		// 	</div>
		// ))
	}
	{
		let str = "师法魔级超";
		root.render(<h3>{str.split("").reverse().join("")}</h3>);
	}

</script>
</html>